<template>
  <view class="cart">
    <view class="cart_item" v-for="(item,index) in cartList" :key="index">
      <view class="cart_item_ckd">
        <checkbox-group @change="itemChecked(index)">
          <checkbox :checked="item.checked" color="#eb4450"></checkbox>
        </checkbox-group>
      </view>
      <view class="cart_item_img">
        <u-image width="100%" mode='widthFix' :src="item.goods_small_logo"></u-image>
      </view>
      <view class="cart_item_info">
        <view class="goods_text u-line-2">{{item.goods_name}}</view>
        <view class="price">
          <view class="goods_price"><text>￥</text>{{item.goods_price}}</view>
          <view class="num">
            <view class="sub" @click="numChange(-1,index)">-</view>
            <view class="goods_num">{{item.goods_num}}</view>
            <view class="add" @click="numChange(1,index)">+</view>
          </view>
        </view>
      </view>
    </view>
    <view class="foot">
      <view class="foot_ckd">
        <checkbox-group @change="allCheckedFn">
          <checkbox :checked="allChecked" color="#eb4450"></checkbox>
        </checkbox-group>
        <text>全选</text>
      </view>
      <view class="foot_sun">
        合计：<text>￥{{allPrice}}</text>
      </view>
      <view class="foot_btn">
        <u-button type="error" size="mini" shape="square">去结算({{allCount}})</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
computed:{
  // 单选影响全选、
  allChecked(){
    return this.cartList.length&&this.cartList.every(item=>item.checked===true)
  },
  // 总价
  allPrice(){
    let sun=0
    this.cartList.forEach(item=>{
      if(item.checked){
        sun+=item.goods_price*item.goods_num
      }
    })
    return sun
  },
  // 总数
  allCount(){
    let sun=0
    this.cartList.forEach(item=>{
      if(item.checked){
        sun+=item.goods_num
      }
    })
    return sun
  },
  ...mapState(['cartList'])
},
methods:{
  // 单个商品选中
  itemChecked(index){
    let list=[...this.cartList]
    list[index].checked=!list[index].checked
    this.$store.commit('setCart',list)
  },
  // 商品数量控制
  async numChange(val,index){
    let list=[...this.cartList]
    if(list[index].goods_num<1){
      const [err,{confirm}]= await uni.showModal({
        title: '提示',
        content: '确定删除吗？'
      })
      if(confirm){
        console.log('用户点击确定')
        list.splice(index,1)
        this.$store.commit('setCart',list)
      }else{
        console.log('用户点击取消')
        list[index].goods_num=1
        this.$store.commit('setCart',list)
      }
    }else{
      list[index].goods_num+=val
      this.$store.commit('setCart',list)
    }
  },
  // 全选影响单选
  allCheckedFn(){
    const flag=!this.allChecked
    let list=[...this.cartList]
    list.forEach(item=>{
      item.checked=flag
    })
    this.$store.commit('setCart',list)
  }
}
}
</script>

<style lang="scss" scoped>
.cart {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  padding: 20rpx;
  .cart_item {
    display: flex;
    border-bottom: 1px solid #eee;
    .cart_item_ckd {
      padding-top:80rpx ;
      checkbox {
        border-radius: 50%;
      }
    }

    .cart_item_img {
      margin: 0 15rpx;
      flex: 1;
    }
    .cart_item_info {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .price {
        display: flex;
        justify-content: space-between;
        .goods_price{
          color: #eb4450;
          text {
            font-size: 26rpx;
          }
        }
        .num {
          display: flex;
          justify-content: space-between;
          .add,.sub {
            border-radius: 50%;
            border: 1px solid #ccc;
            color: #b0b0b0;
            width: 35rpx;
            height: 35rpx;
            text-align: center;
            line-height: 28rpx;
            margin: 0 25rpx;
          }

          .goods_num {
            color: #666;
          }
        }
      }
    }
  }
  .foot{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100vw;
    display: flex;
    .foot_ckd{
      padding: 0rpx 25rpx;
      margin-bottom:12rpx;
      display: flex;
    }
    .foot_sun{
      flex: 1;
      text{
        color: #eb4450;
      }
    }
    .foot_btn{
      padding: 0rpx 25rpx;
    }
  }
}
</style>